<template>
  <el-row :gutter="0" class="middle-board">
    <el-col :offset="0" :span="5" class="channel-list">
      <ul class="home-channel-list clearfix">
        <li
          class="channel-item"
          v-for="channel in channelList"
          :key="channel.id"
        >
          <a href="channel-item-link">
            <img
              class="channel-item-image"
              :src="channel.image"
              :alt="channel.name"
              loading="lazy"
            />
          </a>
          <p class="channel-item-text">{{ channel.name }}</p>
        </li>
      </ul>
    </el-col>
    <el-col :offset="0" :span="19" class="entry-list">
      <ul class="home-entry-list clearfix">
        <li
          class="entry-item clearfix"
          v-for="entry in entryList"
          :key="entry.id"
        >
          <a :href="getFullPath(entry.targetUrl)" target="_blank">
            <img
              class="entry-item-image"
              :src="entry.image"
              :alt="entry.alt"
              loading="lazy"
            />
          </a>
        </li>
      </ul>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { reactive } from "vue";
  import { ChannelListType, EntryListType } from "./../../../types/Shop";
  import { getFullPath } from "@/utils/path";

  const channelList = reactive<ChannelListType[]>([
    {
      id: 1,
      name: "保障服务",
      targetUrl: "https://www.mi.com/service",
      image:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48",
    },
    {
      id: 2,
      name: "企业团购",
      targetUrl: "https://business.qiye.mi.com/",
      image:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48",
    },
    {
      id: 3,
      name: "F码通道",
      targetUrl: "https://www.mi.com/shop/order/fcode",
      image:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48",
    },
    {
      id: 4,
      name: "米粉卡",
      targetUrl: "https://10046.mi.com/",
      image:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48",
    },
    {
      id: 5,
      name: "以旧换新",
      targetUrl: "https://www.mi.com/a/h/16769.html",
      image:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48",
    },
    {
      id: 6,
      name: "话费充值",
      targetUrl: "https://recharge.10046.mi.com/",
      image:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48",
    },
  ]);

  const entryList = reactive<EntryListType[]>([
    {
      id: 1,
      image:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e981f78d2ac17c504975a719cb8b069d.png?w=632&h=340",
      alt: "phone",
      targetUrl: "https://www.mi.com/shop/buy/detail?product_id=10050081",
    },
    {
      id: 2,
      image:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b04dfc206dec442fe161b33082681ec.png?w=632&h=340",
      alt: "tv",
      targetUrl: "https://www.mi.com/shop/buy/detail?product_id=10050079",
    },
    {
      id: 3,
      image:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ac77590368ff636d0b4f6a988133f55.png?w=632&h=340",
      alt: "headset",
      targetUrl: "https://www.mi.com/xiaomibuds4pro",
    },
  ]);
</script>

<style lang="scss" scoped>
  @use "./../../../styles/variable.scss" as *;

  .middle-board {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
    min-height: 170px;
    padding: 15px 0px;
  }

  .channel-list {
    min-width: calc(233px + 20px);
    min-height: 170px;

    padding: 3px;
    list-style-type: none;
    font-size: 12px;
    text-align: $text-center;
    background: #5f5750;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .channel-item {
    list-style: none;
    float: left;
    width: calc(100% / 3);
    height: 82px;
    padding: 10px;
    font: $bsFont;
    border-bottom: 1.5px solid #665e57;
    border-right: 1.5px solid #665e57;
    padding-top: 20px;

    :hover {
      cursor: pointer;
      opacity: 1;
      color: $bsWhite;
    }
  }

  .channel-item-link {
    display: block;
    text-overflow: ellipsis;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }

  .channel-item-image {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 4px;
    opacity: 0.7;
  }

  .channel-item-text {
    color: $bsWhite;
    font-weight: 400;
    opacity: 0.7;
  }

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

  .entry-list {
    min-height: 170px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 12px;
  }

  .entry-item {
    list-style: none;
    float: left;
    width: 310px;
    height: 170px;
    margin-left: 10px;
  }

  .entry-item-image {
    display: block;
    width: 100%;
    height: 170px;
    margin: 0px 10px;
  }
</style>
